import React, { Component } from 'react'


class ProfileCreds extends Component {
    render() {
        const { experience, education } = this.props;

        const expItems = experience.map(exp => (
            <li key={exp._id} className="list-group-item">
                <h4>{exp.company}</h4>
                <p>
                    {exp.from} 至 {exp.to === '' ? '至今' : exp.to}
                </p>
                <p>
                    <strong>职位:</strong> {exp.title}
                </p>
                <p>
                    {exp.location === '' ? null : (
                        <span>
                            <strong>地点: </strong> {exp.location}
                        </span>
                    )}
                </p>
                <p>
                    {exp.description === '' ? null : (
                        <span>
                            <strong>职位描述: </strong> {exp.description}
                        </span>
                    )}
                </p>
            </li>
        ));

        const eduItems = education.map(edu => (
            <li key={edu._id} className="list-group-item">
                <h4>{edu.school}</h4>
                <p>
                    {edu.from} 至 {edu.to === '' ? '至今' : edu.to}
                </p>
                <p>
                    <strong>学历:</strong> {edu.degree}
                </p>
                <p>
                    <strong>专业:</strong> {edu.fieldofstudy}
                </p>
                <p>
                    {edu.description === '' ? null : (
                        <span>
                            <strong>在校表现: </strong> {edu.description}
                        </span>
                    )}
                </p>
            </li>
        ));

        return (
            <div className="row">
                <div className="col-md-6">
                    <h3 className="text-center text-info">个人经历</h3>
                    {expItems.length > 0 ? (
                        <ul className="list-group">{expItems}</ul>
                    ) : (
                        <p className="text-center">没有任何个人经历信息</p>
                    )}
                </div>

                <div className="col-md-6">
                    <h3 className="text-center text-info">教育经历</h3>
                    {eduItems.length > 0 ? (
                        <ul className="list-group">{eduItems}</ul>
                    ) : (
                        <p className="text-center">没有任何教育经历信息</p>
                    )}
                </div>
            </div>
        )
    }
}
export default ProfileCreds;